@import './base.css';
@import './var.css';

#app {
    height: 100vh;
    width: 100vw;
    overflow: auto;
    font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
        Arial, sans-serif;
}

.no-seleced {
    user-select: none;
}

.pointer-events-none {
    pointer-events: none;
}

.margin {
    &-top {
        margin-top: 12px;
        &-small {
            margin-top: 8px;
        }
        &-large {
            margin-top: 24px;
        }
    }
    &-bottom {
        margin-bottom: 12px;
        &-small {
            margin-bottom: 8px;
        }
        &-large {
            margin-bottom: 24px;
        }
    }
    &-left {
        margin-left: 12px;
        &-small {
            margin-left: 8px;
        }
        &-large {
            margin-left: 24px;
        }
    }
    &-right {
        margin-right: 12px;
        &-small {
            margin-right: 8px;
        }
        &-large {
            margin-right: 24px;
        }
    }
    &-row {
        margin-right: 12px;
        margin-left: 12px;
        &-small {
            margin-right: 8px;
            margin-left: 8px;
        }
        &-large {
            margin-right: 24px;
            margin-left: 24px;
        }
    }
    &-col {
        margin-top: 12px;
        margin-bottom: 12px;
        &-small {
            margin-top: 8px;
            margin-bottom: 8px;
        }
        &-large {
            margin-top: 24px;
            margin-bottom: 24px;
        }
    }
}
.padding {
    &-top {
        padding-top: 12px;
        &-small {
            padding-top: 8px;
        }
        &-large {
            padding-top: 24px;
        }
    }
    &-bottom {
        padding-bottom: 12px;
        &-small {
            padding-bottom: 8px;
        }
        &-large {
            padding-bottom: 24px;
        }
    }
    &-left {
        padding-left: 12px;
        &-small {
            padding-left: 8px;
        }
        &-large {
            padding-left: 24px;
        }
    }
    &-right {
        padding-right: 12px;
        &-small {
            padding-right: 8px;
        }
        &-large {
            padding-right: 24px;
        }
    }
    &-row {
        padding-right: 12px;
        padding-left: 12px;
        &-small {
            padding-right: 8px;
            padding-left: 8px;
        }
        &-large {
            padding-right: 24px;
            padding-left: 24px;
        }
    }
    &-col {
        padding-top: 12px;
        padding-bottom: 12px;
        &-small {
            padding-top: 8px;
            padding-bottom: 8px;
        }
        &-large {
            padding-top: 24px;
            padding-bottom: 24px;
        }
    }
}

/***
 * Flexbox Utilities
 */
.flex-col-center {
    display: flex;
    align-items: center;
    align-content: center;
}
